<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <fieldset>
            <legend>study</legend>
            <div id="element_id">
                省<select class="province"></select>
                市<select class="city"></select>
                县<select class="area"></select>
            </div>
        </fieldset>
        <fieldset>
            <legend>默认</legend>
            <div id="city_china" class="form">
                <dl class="row">
                    <dt>省份</dt>
                    <dd><select class="province select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>城市</dt>
                    <dd><select class="city select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>地区</dt>
                    <dd><select class="area select"></select></dd>
                </dl>
            </div>
        </fieldset>

    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script th:src="@{/jquery.cxselect.min.js}"></script>
    <script th:inline="javascript">
        $.cxSelect.defaults.url = 'json/cityData.min.json';
        $.cxSelect.defaults.emptyStyle = 'none';
        $(function () {
            $('#element_id').cxSelect({
                selects: ['province', 'city', 'area']
            });
            console.log('ds');
        });
    </script>
</html>
